<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:首页
@author:成都市一颗优雅草科技有限公司     
@version V5.x 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   企业客服QQ:2853810243  官方客户·技术交流群 929353806交流群 929353806
 -->
<template>
	<view style="height: 100vh;">
		<!-- 顶部开始 -->
		<view class="head shadow">
			<view class="title_wrap">
				<view v-for="(item,index) in tabList" :key="index" class="title" :class="{'active':active==index}" @click="changeTab(index)">
					<text>{{item.title}}</text>
					<view class="head-line pink"></view>
				</view>
			</view>
			<view class="seach" @click="seach">
				<image src="/static/home/seach.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 顶部结束 -->

		<refresh ref="refresh" @isRefresh="isRefresh"></refresh>
		<view style="height: 88rpx;"></view>
		<swiper :style="{height:sysheight+'px'}" :current="active" :duration="300" @change="changeCurrent">
			<swiper-item v-for="(item,index) in tabList" :key="index">
				<scroll-view style="height: 85%;" scroll-y="true" class="content" @scrolltolower="onLoadMore" @touchstart="refreshStart"
				 @touchmove="refreshMove" @touchend="refreshEnd">
					<view v-if="item.type == 0">
						<advert-page v-if="advert!=undefined&&advert.length>=4" :src="advert[index].img" :showAd="tabList[active].showAd"
						 :adUrl="advert[index].ad_url" :openType="advert[index].open_type" @close="closeAd"></advert-page>
						 
						<video-page :videoList="tabList[index].videoList" :page="item.page" :type="item.id"></video-page>
					</view>
					<view class="text-image-item" v-if="item.type==1" v-for="(data,key) in tabList[index].videoList" :key='key'
					 @longpress="showModelData(key)" @click="toTextImage(data)" hover-class="view-hover">
						<view class="text-image-head-wrapper">
							<view @click.stop="()=>{}">
								<image class="text-image-head" :src="formatUrl(data.head_img,5)" @click="tapAvater(''+data.uid)" mode="aspectFill"></image>
							</view>
							<view class="text-image-name-wrapper">
								<text class="text-image-name">{{data.name}}</text>
								<text class="text-image-time">{{$utils.timeago(data.create_time)}}</text>
							</view>
							<view class="text-image-down-wrapper" @click.stop="showModelData(key)">
								<image class="text-image-down" src="/static/img/down.png" mode="aspectFit"></image>
							</view>
						</view>
						<view v-if="data.type==0" class="text-image-content-wrapper">
							<text class="text-image-content">
								{{subContent(data.content)}}
							</text>
						</view>
						<view v-if="data.type==1" class="text-image-images-wrapper" @click.stop="()=>{}">
							<text class="text-image-content-text">
								{{subContent(data.content)}}
							</text>
							<image v-for="(img,i) in StringtoArray(data.images)" :key="i" :src="formatUrl(img,5)" mode="aspectFill" class="text-image-images"
							 :class="{'.text-image-images-3':StringtoArray(data.images).length>=3}" @click="previmg(StringtoArray(data.images),i)">
							</image>
						</view>
						<view class="text-image-menu">
							<view class="text-image-menu-item" @click.stop="showModelDataShare(key)">
								<image class="text-image-menu-icon" src="/static/text_image_icon/share_black.png" mode="aspectFit"></image>
								<text class="text-image-menu-count">{{data.share_count}}</text>
							</view>
							<view class="text-image-menu-item">
								<image class="text-image-menu-icon" src="/static/text_image_icon/message_black.png" mode="aspectFit"></image>
								<text class="text-image-menu-count">{{data.comment_count}}</text>
							</view>
							<view class="text-image-menu-item" @click.stop="tapNegative(key)">
								<image class="text-image-menu-icon" :src="data.negative!=0?'/static/text_image_icon/negative_red.png':'/static/text_image_icon/negative_black.png'"
								 mode="aspectFit"></image>
								<text class="text-image-menu-count" :class="{active:data.negative!=0}">{{data.negative_count}}</text>
							</view>
							<view class="text-image-menu-item" @click.stop="tapLove(key)">
								<image class="text-image-menu-icon" :src="data.skr!=0?'/static/text_image_icon/skr_red.png':'/static/text_image_icon/skr_black.png'"
								 mode="aspectFit"></image>
								<text class="text-image-menu-count" :class="{active:data.skr!=0}">{{data.skr_count}}</text>
							</view>
						</view>
					</view>
					<view :style="{'textAlign':'center'}" class="loading">
						<text v-if="!tabList[active].isMore">暂无更多数据</text>
						<text v-if="tabList[active].isMore">正在加载...</text>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 引入下拉刷新
	import refresh from '@/components/refresh/refresh.vue';
	import videoPage from "@/components/video/video-page.vue"
	import advertPage from "@/components/advert/advert-page.vue"

	export default {
		components: {
			videoPage,
			refresh,
			advertPage
		},
		data() {
			return {
				selectModalData: [{
					title: '复制'
				}],
				shareData: [{
						title: '微信好友',
						icon: '/static/img/fenxiang1.png'
					},
					{
						title: '朋友圈',
						icon: '/static/img/fenxiang2.png'
					},
					{
						title: 'QQ好友',
						icon: '/static/img/fenxiang3.png'
					},
					{
						title: 'Q空间',
						icon: '/static/img/fenxiang4.png'
					},
				],
				index: 0,
				sysheight: 0,
				swiperHeight: 0,
				active: 0,
				page: 1,
				tabList: [{
					init: false,
					id: "hot",
					title: "热门",
					videoList: [],
					page: 1,
					isMore: true,
					showAd: true,
					type: 0,
					loadmore: false
				}, {
					init: false,
					id: "new",
					title: "关注",
					videoList: [],
					page: 1,
					isMore: true,
					showAd: true,
					type: 0,
					loadmore: false
				}, {
					init: false,
					id: "iliao",
					title: "爱聊",
					data: [],
					page: 1,
					isMore: true,
					showAd: true,
					type: 1,
					loadmore: false
				}, {
					init: false,
					id: "images",
					title: "图吧",
					data: [],
					page: 1,
					isMore: true,
					showAd: true,
					type: 1,
					loadmore: false
				}, ],
				clickItem: {}
			}
		},
		created() {
			this.sysheight = uni.getSystemInfoSync().windowHeight
			this.init();
		},
		methods: {
			init(key) {
				if (!key) {
					key = 0;
				}
				const item = this.tabList[key];
				if (item.init) return;
				this.tabList[key].init = true;
				if (item.type == 0) {
					this.$api.videoList({
						'type': item.id,
						'page': item.page
					}).then(({ data }) => {
						if (data.code == 1) {
							uni.showToast({
								title: '暂无数据',
								icon: "none"
							});
							this.tabList[key].loadmore = false;
							this.tabList[key].isMore = false;
							this.tabList[key].videoList = [];
						} else {
							// 获得数据
							this.tabList[key].videoList = data.data;
							if (data.data.length < 20) {
								this.tabList[key].loadmore = false;
								this.tabList[key].isMore = false;
							}
						}
					});
				} else if (item.type == 1) {
					var type = key - 2;
					this.$api.textImageList({
						type: type
					}).then((res) => {
						if (res.data.code == 1) {
							uni.showToast({
								title: '暂无数据',
								icon: "none"
							});
							this.tabList[key].loadmore = false;
							this.tabList[key].isMore = false;
							this.tabList[key].videoList = [];
							return;
						}
						this.tabList[key].videoList = res.data.data;
						if (res.data.data.length < 20) {
							this.tabList[key].loadmore = false;
							this.tabList[key].isMore = false;
						}
					}).catch(res => {
						// 失败进行的操作
						uni.showToast({
							title: '获取失败,' + res.msg,
							icon: "none"
						});
					})
				}
			},
			//点击头像事件
			tapAvater(uid) {
				uni.navigateTo({
					url: '/pages/index/user/other?uid=' + uid
				})
			},
			previmg(urls, index) {
				urls = urls.map((item, key) => {
					return this.formatUrl(item)
				})
				uni.previewImage({
					current: index,
					indicator: "default",
					urls: urls,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							switch (data.tapIndex) {
								case 0: //保存图片
									uni.downloadFile({
										url: urls[data.index],
										success: (res) => {
											if (res.statusCode === 200) {
												uni.saveImageToPhotosAlbum({
													filePath: res.tempFilePath,
													success: function() {
														uni.showToast({
															title: "保存成功"
														});
													},
													fail: function() {
														uni.showToast({
															title: "保存失败，请稍后重试",
															icon: "none"
														});
													}
												});
											}
										}
									})
									break;
							}
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			StringtoArray(images) {
				if (images == undefined || images == "") {
					return [];
				}
				return images.split(",");
			},
			showModelData(key) {
				this.clickItem = key;
				var res = {
					clickItem: key,
					data: this.selectModalData,
					type: "select"
				};
				uni.$emit("showModelData", res)
			},
			showModelDataShare(key) {
				this.clickItem = key;
				var res = {
					clickItem: key,
					data: this.shareData,
					'type': 'share'
				};
				uni.$emit("showModelData", res)
			},
			onConfirm(e) {
				var provider = "",
					scene = "",
					type = 1
				let item = this.tabList[this.active].videoList[this.clickItem];
				switch (e.title) {
					case "复制":
						uni.setClipboardData({
							data: item.content,
							success: function() {
								uni.showToast({
									title: '复制成功',
								});
							}
						});
						break;
					case "不感兴趣":
						uni.showToast({
							title: '以后少为您推荐该内容',
							icon: 'none'
						});
						break;
					case "内容重复":
						uni.showToast({
							title: '已提交',
							icon: 'none'
						});
						break;
					case "屏蔽此人":
						uni.showToast({
							title: '已为您屏蔽此人',
							icon: 'none'
						});
						break;
					case "微信好友":
						provider = "weixin"
						scene = "WXSceneSession"
						uni.share({
							provider: provider,
							scene: scene,
							type: type,
							title: this.subContent(item.content),
							summary: item.content,
							href: "http://songshu.youyacao.com/",
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
						break
					case "朋友圈":
						provider = "weixin"
						scene = "WXSenceTimeline"
						uni.share({
							provider: provider,
							scene: scene,
							type: type,
							title: this.subContent(item.content),
							summary: item.content,
							href: "http://songshu.youyacao.com/",
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
						break
					case "QQ好友":
						provider = "qq"
						scene = ""
						uni.share({
							provider: provider,
							scene: scene,
							type: type,
							title: this.subContent(item.content),
							summary: item.content,
							href: "http://songshu.youyacao.com/",
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
						break
					case "Q空间":
						provider = "qq"
						scene = ""
						uni.share({
							provider: provider,
							scene: scene,
							type: type,
							title: this.subContent(item.content),
							summary: item.content,
							href: "http://songshu.youyacao.com/",
							success: function(res) {

							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
						break;
				}
			},
			subContent(text) {
				if (text == undefined) {
					return;
				}
				return text.slice(0, 80) + (text.length > 50 ? "......" : "")
			},
			formatUrl(url, scale) {
				if (!scale) {
					scale = 1;
				}
				if (url == undefined) {
					return "";
				}
				var index = url.indexOf("http");
				if (index == 0) {
					return url;
				}
				return this.$store.state.baseUrl + "/thumb/" + scale + "?url=" + url;
			},
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			//刷新名需写为isRefresh,刷新组件中会回调此事件
			isRefresh() {
				this.refresh();
			},
			/**
			 * @param {Object} type 切换的选项卡ID
			 */
			changeTab: function(type) {

				this.active = type;
			},
			loadmore() {
				//console.log("loadmore")
				this.onLoadMore();
			},
			scroll(e) {
				//console.log("loadmore", e)
			},
			scrolltop() {
				uni.startPullDownRefresh()
			},
			changeCurrent(e) {
				this.active = e.detail.current;
				this.init(this.active)
			},
			seach() {
				uni.navigateTo({
					url: '/pages/index/user/category-search/category-search'
				})
			},
			onLoadMore() {
				if (!this.tabList[this.active].isMore) {
					return;
				}
				if (this.tabList[this.active].isMore) {
					this.tabList[this.active].loadmore = true;
					// 初始化视频列表
					this.$api.videoList({
						'type': this.tabList[this.active].id,
						'page': ++this.tabList[this.active].page
					}).then(res => {
						uni.stopPullDownRefresh();
						if (res.data.code == 0) {
							this.tabList[this.active].videoList = this.tabList[this.active].videoList.concat(res.data.data);

						} else {
							this.tabList[this.active].isMore = false;
						}
						this.tabList[this.active].loadmore = false;
					}).catch(res => {
						this.tabList[this.active].isMore = false;
						this.tabList[this.active].loadmore = false;
						uni.stopPullDownRefresh();
						// 失败进行的操作
					})
				} else {
					this.tabList[this.active].loadmore = true;
					uni.showToast({
						title: '暂无更多数据'
					});
				}

			},
			//刷新视频数据
			refreshVideo() {
				this.tabList[this.active].page = 1;
				this.tabList[this.active].isMore = true;
				this.tabList[this.active].loadmore = true;
				// 初始化视频列表
				this.$api.videoList({
					'type': this.tabList[this.active].id,
					'page': this.tabList[this.active].page
				}).then(res => {
					this.$refs.refresh.endAfter() //刷新结束调用
					if (res.data.code == 1) {
						uni.showToast({
							title: '暂无数据',
							icon: "none"
						});
						this.tabList[this.active].loadmore = false;
						this.tabList[this.active].isMore = false;
						this.tabList[this.active].videoList = [];
						return;
					}
					this.tabList[this.active].videoList = res.data.data;
					if (res.data.data.length < 20) {
						this.tabList[this.active].loadmore = false;
						this.tabList[this.active].isMore = false;
					}
				}).catch(res => {
					this.$refs.refresh.endAfter() //刷新结束调用
					uni.showToast({
						title: res.msg
					});
					// 失败进行的操作
				})
			},
			//刷新图文信息
			refreshTextImage() {
				this.tabList[this.active].page = 1;
				this.tabList[this.active].isMore = true;
				this.tabList[this.active].loadmore = true;
				// 初始化视频列表
				this.$api.textImageList({
					'type': this.active - 2,
				}).then(res => {
					this.$refs.refresh.endAfter() //刷新结束调用
					if (res.data.code == 1) {
						uni.showToast({
							title: '暂无数据',
							icon: "none"
						});
						this.tabList[this.active].loadmore = false;
						this.tabList[this.active].isMore = false;
						this.tabList[this.active].videoList = [];
						return;
					}
					this.tabList[this.active].videoList = res.data.data;
					if (res.data.data.length < 20) {
						this.tabList[this.active].loadmore = false;
						this.tabList[this.active].isMore = false;
					}
				}).catch(res => {
					this.$refs.refresh.endAfter() //刷新结束调用
					uni.showToast({
						title: res.msg
					});
					// 失败进行的操作
				})
			},
			timeago(time) {
				this.$utils.timeago(time)
			},
			refresh() {
				this.$store.dispatch('getAdvert')
				this.tabList[this.active].showAd = true;
				//console.log("home refresh");
				if (this.tabList[this.active].type == 0) {
					this.refreshVideo();
				} else if (this.tabList[this.active].type == 1) {
					this.refreshTextImage();
				}
			},
			closeAd() {
				this.tabList[this.active].showAd = false;
			},
			toTextImage(item) {
				uni.navigateTo({
					url: '/pages/index/iliao/iliao',
					success: res => {
						uni.$emit('setTextImageData', item);
					},
					fail: () => {},
					complete: () => {}
				});
				return false;
			},
			//点击赞
			tapLove(index) {
				var item = this.tabList[this.active].videoList[index];
				if (this.user == null) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}

				//点赞视频
				this.$api.videoLike({
					type: 1,
					vid: item.id,
					skr: item.skr != 0 ? "0" : "1",
				}).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					} else {
						this.tabList[this.active].videoList[index].skr = this.tabList[this.active].videoList[index].skr != 0 ? 0 : 1;
						if (!this.tabList[this.active].videoList[index].skr) {
							this.tabList[this.active].videoList[index].skr_count = this.tabList[this.active].videoList[index].skr_count -
								1;
						} else {
							this.tabList[this.active].videoList[index].skr_count = this.tabList[this.active].videoList[index].skr_count +
								1;
						}
					}
				}).catch(res => {
					// 失败进行的操作
				})
				var list = this.tabList[this.active].videoList;
				delete this.tabList[this.active].videoList;
				this.$set(this.tabList[this.active], 'videoList', list)
			},
			//点击踩
			tapNegative(index) {
				var item = this.tabList[this.active].videoList[index];
				if (this.user == null) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}

				//点踩
				this.$api.videoNegative({
					type: 1,
					vid: item.id,
					negative: item.negative != 0 ? "0" : "1",
				}).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					} else {
						this.tabList[this.active].videoList[index].negative = this.tabList[this.active].videoList[index].negative != 0 ?
							0 : 1;
						if (!this.tabList[this.active].videoList[index].negative) {
							this.tabList[this.active].videoList[index].negative_count = this.tabList[this.active].videoList[index].negative_count -
								1;
						} else {
							this.tabList[this.active].videoList[index].negative_count = this.tabList[this.active].videoList[index].negative_count +
								1;
						}
					}
				}).catch(res => {
					// 失败进行的操作
				})
				var list = this.tabList[this.active].videoList;
				delete this.tabList[this.active].videoList;
				this.$set(this.tabList[this.active], 'videoList', list)
			},
		},
		computed: {
			advert() {
				return this.$store.state.advert.page
			},
			user() {
				return this.$store.state.user;
			}
		},
		mounted() {




		}
	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-content;
	}

	swiper {
		min-height: 100%;
	}

	.head {
		position: fixed;
		//#ifdef APP-PLUS
		padding-top: var(--status-bar-height);
		//#endif
		z-index: 1;
		left: 0;
		right: 0;
		background: $uni-bg-color;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		height: 88rpx;
	}

	.content {
		position: relative;
		//#ifdef APP-PLUS
		padding-top: 88rpx;
		//#endif
		padding-bottom: 123rpx;
		//#ifdef APP-PLUS
		padding-top: var(--status-bar-height);
		//#endif
		width: 100%;
		bottom: 0;
	}

	.shadow {
		box-shadow: 0 1px 6px #ccc;
	}

	.title_wrap {
		flex: 9;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;

		.title {
			width: 100rpx;
			align-items: center;
			justify-content: flex-start;
			display: flex;
			flex-direction: column;
			margin: 10rpx 10rpx;

			text {
				font-size: $uni-font-size-base;
			}
		}

		.active {
			text {
				font-size: $uni-font-size-lg;
				font-weight: bold;
			}

			.pink {
				border-bottom: 5rpx solid $uni-text-color-active;
				box-shadow: 0rpx 4rpx 5rpx 0rpx $uni-text-color-active;
			}
		}

		.head-line {
			overflow: hidden;
			margin-top: 5rpx;
			width: 30rpx;

		}

	}

	.seach {
		flex: 1;
		display: flex;
		flex-direction: row;
		position: relative;
		right: 0rpx;
		justify-content: flex-end;
		align-items: center;

		image {
			display: inline-block;
			width: 35rpx;
			height: 25rpx;
			margin-right: 25rpx;
			margin-bottom: 25rpx;

		}
	}

	.white-footer {
		display: flex;
		background-color: white;
		height: 100rpx;
		width: 100vw;
	}

	.text-image-item:first-child {
		padding-top: 12rpx;
	}

	.text-image-item {
		margin-bottom: 12rpx;
		background: white;
		display: flex;
		flex-direction: column;
		padding: 0 24rpx;
		justify-content: center;
	}

	.text-image-head-wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		position: relative;
	}

	.text-image-head {
		margin-top: 12rpx;
		margin-bottom: 12rpx;
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
		align-items: center;
	}

	.text-image-name-wrapper {
		margin-left: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.text-image-name {
		font-size: 27rpx;
		font-family: PingFang SC;

		margin-bottom: 5rpx;
		color: rgba(0, 0, 0, 1);
	}

	.text-image-time {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.5);
		line-height: 12px;
	}

	.text-image-down-wrapper {
		padding: 0 20rpx;
		height: 100%;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.text-image-down {
		width: 30rpx;
		height: 20rpx;
	}

	.text-image-content-wrapper {
		margin-top: 24rpx;
		margin-bottom: 30rpx;
	}

	.text-image-content {
		width: 100%;
		font-size: 29rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		line-height: 46rpx;
	}

	.text-image-menu {
		margin-bottom: 25rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text-image-menu-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.text-image-menu-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		align-content: center;
	}

	.text-image-menu-count {
		font-size: 24rpx;
		margin-left: 12rpx;
		padding-bottom: 5rpx;
	}

	.text-image-images-wrapper {
		margin-top: 12rpx;
		margin-bottom: 12rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-right: -12rpx;
	}


	.text-image-images-3 {
		max-height: 220rpx;
		max-width: 30vw;
	}

	.text-image-images {
		margin-right: 12rpx;
		flex: 4;
		min-width: 30vw;
		margin-bottom: 12rpx;
	}

	.text-image-content-text {
		width: 100%;
		font-size: 29rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		line-height: 46rpx;
		margin-bottom: 24rpx;
	}
</style>
